
// FYI: most images are naturally 300px wide
// FYI: border is 14px in horizontal width
$docs-sublanding-sidebar-width: 300px + 14px;

.docs-sublanding {
  display: flex;
}

.docs-sublanding__main {
  flex-grow: 1;
}

.docs-sublanding__content {
  > :first-child {
    margin-top: 0;
  }
}

.docs-sublanding__sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  width: $docs-sublanding-sidebar-width + 60px;
  padding-left: 60px;
  margin-bottom: 2em;
}

.docs-sublanding__sidebar-title {
  margin-bottom: -1em;
  font-weight: $font-weight-bold;
}

.docs-sublanding__image {
  margin: 2em 0;
  color: #999; // for caption and caption underline

  img {
    display: block;
    max-width: 100%;
    border: 7px solid $control-border-color-light;
  }
}

a.docs-sublanding__image {
  @include hover-underline;
  display: block; // if an <a>
}

.docs-sublanding__image-caption {
  margin: .5em 0;
  font-size: 14px;
  line-height: 1.4;
}

.docs-sublanding__child-group {
  margin: 0 0 2.8em;
}

.docs-sublanding__child-group-title {
  @include docs-group-title;
  margin-bottom: 1.5em;
}
